<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'mobile_banner_img'"></cms:ads>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="http://gwfile.csxuncong.com/wantaien/mobile/css/swiper.min.css">
    <link rel="stylesheet" href="http://gwfile.csxuncong.com/wantaien/mobile/css/animate.css">
    <link rel="stylesheet" href="http://gwfile.csxuncong.com/wantaien/mobile/css/common.css">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]--> 
    <style>
        body{
            background: #f7f7f7;
        }
        .tab-content p{
            font-size: 14px;
            color: #090909;
            line-height: 30px;
        }
        .em{
            font-weight: bold;
        }
        .tab-content .img-box{
            margin: 20px -8px 0;
        }
        .tab-content .img-box .img{
            max-width: 100%;
            height: 53px;
            padding: 0 8px;
        }
        .common-box{
            padding: 20px 15px;
            background: #ffffff;
            min-height: 250px;
        }
    </style>
</head>
<body>
    <jsp:include page="_top.jsp"></jsp:include> 
    <div class="banner">
        <img src="${mobile_banner_img.adImg}" class="img zy" data-type="ad" data-id="${mobile_banner_img.adId}">
    </div>
    <div class="tab">
        <cms:arts var="artList" code="cpyy" pageNow="0" pageSize="999"></cms:arts>
        <c:forEach items="${artList }" var="item" >
            <span class="tab-item">${item.artTitle}</span>
        </c:forEach>
    </div>
    
    <div class="container">
        <!-- Nutrition -->
        <c:forEach items="${artList }" var="item" >
        <div class="tab-content hide">
            <div class="common-box">
                <div class="flex align-center animate__animated animate__fadeInUp">
                    <h3 class="title">${item.artTitle}</h3>
                </div>
                <div class="animate__animated animate__fadeInUp">
                    ${item.artContent}
                </div>
            </div>
        </div>
        </c:forEach>
    </div>
  <jsp:include page="_footer.jsp"></jsp:include>  
</body>
    <script src="js/swiper.min.js"></script>
    <script>
         window.onload = function(){
            var itemEls = document.getElementsByClassName('tab-item');
            var contentEls = document.getElementsByClassName('tab-content');
            var type = getQueryVariable('type') || 0;
            tabChange(type)
            
            for(var i= 0; i < itemEls.length;i++){
                let index = i;
                itemEls[i].onclick = tabChange.bind(this, index)
            }

            function tabChange(index){
                for(var i= 0; i < itemEls.length;i++){
                    itemEls[i].className="tab-item";
                    contentEls[i].className="tab-content hide";
                }
                itemEls[index].className="tab-item active";
                contentEls[index].className="tab-content";
            }
            function getQueryVariable(variable)
            {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                        var pair = vars[i].split("=");
                        if(pair[0] == variable){return pair[1];}
                }
                return(false);
            }
            var menuIcon = document.getElementById('menuIcon');
            var headerNav = document.getElementById('headerNav');
            var closeNav = document.getElementById('closeNav');
            menuIcon.addEventListener('click', function () {
                headerNav.style.display = "block";
            }, false)
            closeNav.addEventListener('click', function () {
                headerNav.style.display = "none";
            }, false)
         }
    </script>
</html>